<template>
  <HeaderFooterLayout>
    <view class="mx-5 pb-10">
      <u-form :rules="rules" :model="supplier" ref="formRef" labelWidth="80" labelPosition="left">
          <u-form-item required label="名称" prop="name" borderBottom>
            <u-input placeholder="必填" v-model="supplier.name" border="none"></u-input>
          </u-form-item>
        <u-form-item required label="联系方式" prop="contact" borderBottom>
          <u-input type="number" placeholder="必填" v-model="supplier.contact" border="none"></u-input>
        </u-form-item>

        <u-form-item  label="地址" prop="address" borderBottom>
          <u-input placeholder="选填" v-model="supplier.address" border="none"></u-input>
        </u-form-item>
        <u-form-item  label="描述" prop="description" borderBottom>
          <u-input placeholder="选填" v-model="supplier.description" border="none"></u-input>
        </u-form-item>
      </u-form>
    </view>
    <template #footer>
      <u-button type="primary" @click="handleSubmit">提交</u-button>
      <u-button v-if="editMode==='update'" type="error" :plain="true" @click="handleRemove">删除</u-button>
    </template>
  </HeaderFooterLayout>
</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import {useProductStore} from "@/store/product";
import {storeToRefs} from "pinia";
import api from "@/api";
import MyDayjs from "@/utils/common/myDayjs";
import HeaderFooterLayout from "@/layout/HeaderFooterLayout.vue";

const formRef = ref()
const productStore = useProductStore()
const {selectedSupplier, editMode} = storeToRefs(productStore)
const supplier = ref(<ISupplier>{
  name: ''
})
const rules = ref({
  barcode: [
    {
      required: true,
      message: '请输入条形码',
      trigger: ['blur', 'change']
    },
    {
      required: true,
      message: '请输入有效条形码',
      type: 'pattern',
      pattern: '^69[0-9]{11}$',
      trigger: ['blur', 'change']
    }
  ],
  contact:[
    {
      required: true,
      message: '请输入联系方式',
      trigger: ['blur', 'change']
    },
    {
      required: true,
      message: '请输入有效联系方式',
      type: 'pattern',
      pattern: '^1[0-9]{10}$',
      trigger: ['blur', 'change']
    }
  ]
})
onMounted(() => {
  if (editMode.value === 'update') {
    uni.setNavigationBarTitle({
      title: '编辑商品'
    })
  } else if (editMode.value === 'add') {
    uni.setNavigationBarTitle({
      title: '新增商品'
    })
  }
  supplier.value = JSON.parse(JSON.stringify(selectedSupplier.value))
})

const handleSubmit = () => {
  formRef.value.validate().then((res: any) => {
    if (res) {
      if (editMode.value === 'update') {
        api.supplier.update(supplier.value).then((res: any) => {
          if (res.data.code === 0) {
            supplier.value.updatedAt = MyDayjs().format('YYYY-MM-DD HH:mm:ss')
            productStore.updateSupplier(supplier.value)
            uni.navigateBack({
              success() {
                uni.showToast({
                  title: '修改成功',
                  icon: 'success'
                })
              }
            })
          }
        })
      } else if (editMode.value === 'add') {
        api.supplier.add(supplier.value).then((res: any) => {
              if (res.data.code === 0) {
                supplier.value.id = res.data.data.id
                productStore.unshiftSupplier(supplier.value)
                uni.navigateBack({
                  success() {
                    uni.showToast({
                      title: '添加成功',
                      icon: 'success'
                    })
                  }
                })
              }
            }
        )
      }
    }
  })
}

const handleRemove=()=>{
  uni.showModal({
    title: '提示',
    content: '确定删除吗？',
    success: function (res) {
      if (res.confirm) {
        api.supplier.removeById({
          id: supplier.value.id
        }).then((res: any) => {
          if (res.data.code === 0) {
            productStore.removeSupplier(supplier.value)
            uni.navigateBack({
              success() {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                })
              }
            })
          }
        })

      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  })
}
</script>

<style scoped>

</style>